<template>
  <div>
    <h1>新增货主合同</h1>
    ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <tr>
        <td>
          <el-form-item label="合同标题:" prop="biaoTi">
            <el-input v-model="form.biaoTi" placeholder="请输入合同标题"></el-input>
          </el-form-item>
        </td>
        <td>
           <el-form-item label="货主单位:" prop="danWei">
            <el-input v-model="form.danWei" placeholder="请输入货主单位"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="货主负责人:" prop="ren">
            <el-input v-model="form.ren" placeholder="请输入货主负责人"></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="线 路:" prop="xianLu">
           <el-select v-model="form.xianLu" placeholder="请选择线路" clearable>
              <el-option v-for="item in www" :key="item.id" :label="item.lineTable1" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="吨 运 价:" prop="yunJia">
            <el-input v-model="form.yunJia" placeholder="请输入吨 运 价"></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="包车条件吨位:">
            <el-input v-model="form.dunWei" placeholder="请输入包车条件吨位"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="包车金额:">
             <el-input v-model="form.jInE" placeholder="请输入包车金额"></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="经办人:" prop="jinBanRen">
            <el-input v-model="form.jinBanRen" placeholder="请输入经办人"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="签订时间:" prop="qianDinDate">
           <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.qianDinDate" style="width: 100%;"></el-date-picker>
    </el-col>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="合同金额:">
            <el-input v-model="form.heTongJinE" placeholder="请输入合同金额"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="合同标的或项目说明:">
               <el-input type="textarea" v-model="form.heTongBiao" placeholder="请输入合同标的或项目说明"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="合同主要条款/变更条款:">
            <el-input type="textarea" v-model="form.tiaoKuan" placeholder="请输入合同主要条款/变更条款" ></el-input>
          </el-form-item>
        </td>
      </tr>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      form: {
        biaoTi: '',
        danWei: '',
        ren: '',
        xianLu: '',
        yunJia: '',
        dunWei: '',
        jInE: '',
        jinBanRen: '',
        qianDinDate: '',
        heTongJinE: '',
        heTongBiao: '',
        tiaoKuan: '',
      },
        rules: {
        biaoTi: [
          { required: true, message: '请输入合同标题', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        danWei: [
          { required: true, message: '请输入货主单位', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        ren: [
          { required: true, message: '请输入货主负责人', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
          xianLu: [
          { required: true, message: '请选择线路', trigger: 'change' }
        ],
        yunJia: [
          { required: true, message: '请输入吨价位', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],

        qianDinDate: [
          { required: true, message: '请输入签订时间', trigger: 'blur' },
        ],
        jinBanRen: [
          { required: true, message: '请输入经办人', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
      },
      www:[],
    }
  },
  created()
  {
    this.BingXian();
  },
  methods: {
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
           this.Add();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    Add () {
      this.$http({
        url: "https://localhost:44357/api/Own/OwnAdd",
        method: "post",
        data: this.form
      }).then((r) => {
        if (r.data = 200) {
          this.$message({
            message: '恭喜你，新增货主合同成功！',
            type: 'success'
          });
          this.$router.push("/OnwSel");
        }
      })
    },
    BingXian () {
      this.$http({
        url: "https://localhost:44357/api/Own/Bing",
        method: "get",
      }).then((r) => {
        this.www = r.data;
      })
    },
    onSubmit () {
      console.log('submit!');
    }
  }
}
</script>